iT邦幫忙

2024 iThome 鐵人賽

DAY 10
0
佛心分享-SideProject30

用React Native打造找餐店APP系列 第 10

[Day 10] 從使用者介面到發想資料格式(一)

  • 分享至 

  • xImage
  •  

前言
在前面的流程發想與prototype設計之後,對於這款APP的未來實現情景有了更加清晰的想像。

接下來,我將以這款餐點系統APP的核心功能進行發想。由於它是一款餐點系統應用,我認為核心功能應包括:

  • 瀏覽美食
  • 點餐
  • 結帳付款

因此,我們將從這些核心功能的首頁畫面開始發想,並探討如何準備前置資料。

https://ithelp.ithome.com.tw/upload/images/20240810/20132295IP4TO4EmVy.png

從上面畫面可以看餐點菜單這個卡片元件區塊可發現從後端API取回資料欄位可以怎麼設計:
https://ithelp.ithome.com.tw/upload/images/20240810/20132295kPk0IbmfKu.png

可從訂單追蹤頁面在資料欄位需要設計一個存放訂單狀態
https://ithelp.ithome.com.tw/upload/images/20240810/20132295S3VF2HzT1m.png

完成第一筆 Menu 資料格式

{
    id: 1,
    foodName: "點心小拼盤",
    foodPrice: 80,
    description: "套餐加價  ",
    OriginPrice: 110,
    Price: 60,
    foodImage: "../assets/burger1.jpg",
    status: "製作中"
},

status 在後端可以用Enum方式表示Type
例如: "製作中" 、 "等待中" 、 "已結單"


上一篇
[Day 9] APP餐點圖從何而來?
下一篇
[Day 11] 從使用者介面到發想資料格式(二)
系列文
用React Native打造找餐店APP30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言